import React, { useState } from 'react';
import { Tag } from 'antd';

const categories = [
  { key: 'trend', name: '趋势' },
  { key: 'policy', name: '政策' },
  { key: 'investment', name: '投融资' },
  { key: 'talent', name: '人才' },
];

const CategoryNav: React.FC = () => {
  const [active, setActive] = useState('trend');
  return (
    <div style={{ marginBottom: 16 }}>
      {categories.map(cat => (
        <Tag
          key={cat.key}
          color={active === cat.key ? '#fa8c16' : '#f0f0f0'}
          style={{
            fontSize: 16,
            padding: '6px 24px',
            borderRadius: 20,
            marginRight: 16,
            cursor: 'pointer',
            color: active === cat.key ? '#fff' : '#888',
            border: 'none',
            background: active === cat.key ? '#fa8c16' : '#f0f0f0',
            fontWeight: active === cat.key ? 700 : 400
          }}
          onClick={() => setActive(cat.key)}
        >
          {cat.name}
        </Tag>
      ))}
    </div>
  );
};

export default CategoryNav; 